<template>
  <div class="left">
    <leftSlot class="top">
      <template #name>
        <div style="margin-bottom: 5px">数据统计</div>
      </template>
      <template #content>
        <div class="head">
          <span>可预约人数：9999999</span>
        </div>
        <div class="total">
          <div class="num bg" v-for="i in 7" :key="i">{{ i }}</div>
        </div>
        <div class="liquidfill" ref="liquidfill"></div>
      </template>
    </leftSlot>
    <leftSlot class="top">
      <template #name>
        <div style="margin-bottom: 5px">男女比例</div>
      </template>
      <template #content>
        <div class="sex">
          <div class="sex-item">
            <div class="sex-item-top bg">男士</div>
            <div class="sex-item-buttom bg"></div>
          </div>
          <div class="sex-item">
            <div class="sex-item-top sex-right-top bg">女士</div>
            <div class="sex-item-buttom sex-right-buttom bg"></div>
          </div>
          <div class="sex-text">
            <span class="item"> 男：60% </span><span class="item"> 女：40% </span>
          </div>
          <div class="sex-buttom" ref="sex"></div>
        </div>
      </template>
    </leftSlot>
    <leftSlot class="top">
      <template #name>
        <div style="margin-bottom: 5px">年龄分布</div>
      </template>
      <template #content>
        <div class="agecanvas" ref="age"></div>
      </template>
    </leftSlot>
  </div>
</template>

<script lang="ts" setup>
import leftSlot from './left-slot.vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { onMounted, ref } from 'vue'

const liquidfill = ref(null)
const sex = ref(null)
const age = ref(null)
const liquidfilloptions = {
  title: {
    text: '剩余容量',
    textStyle: {
      color: '#fff',
      fontSize: 12
    }
  },
  series: [
    {
      type: 'liquidFill',
      data: [0.6, 0.4],
      radius: '90%',
      outline: {
        show: true
      },
      label: {
        show: true,
        formatter: function (params: any) {
          return (params.value * 100).toFixed(2) + '%'
        },
        textStyle: {
          fontSize: 16,
          color: '#fff',
          fontWeight: '700'
        }
      }
    }
  ]
}
const sexoptions = {
  //x|y
  xAxis: {
    show: false,
    min: 0,
    max: 100
  },
  yAxis: {
    show: false,
    type: 'category'
  },
  series: [
    {
      type: 'bar',
      data: [60],
      barWidth: 10,
      z: 100,
      itemStyle: {
        color: '#1668cb',
        borderRadius: 20
      }
    },
    {
      type: 'bar',
      data: [100],
      barWidth: 10,
      //调整女士柱条位置
      barGap: '-100%',
      itemStyle: {
        color: '#ff4b7a',
        borderRadius: 20
      }
    }
  ],
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  }
}
const ageoptions = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    right: 0,
    orient: 'vertical', //图例组件方向的设置
    textStyle: {
      color: 'white',
      fontSize: 12
    }
  },
  series: [
    {
      name: '年龄分布',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['35%', '50%'],
      avoidLabelOverlap: false,
      padAngle: 1, //扇形之间的间距
      itemStyle: {
        borderColor: '#fff'
      },
      label: {
        show: true,
        position: 'inside',
        color: 'white'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        { value: 1048, name: '18-30' },
        { value: 735, name: '10以下' },
        { value: 580, name: '10-18' },
        { value: 484, name: '30-60' },
        { value: 300, name: '60以上' }
      ]
    }
  ]
}

onMounted(() => {
  let myChart = echarts.init(liquidfill.value)
  myChart.setOption(liquidfilloptions)

  let sexChart = echarts.init(sex.value)
  sexChart.setOption(sexoptions)

  let ageChart = echarts.init(age.value)
  ageChart.setOption(ageoptions)
})
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  .bg {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .top {
    width: 100%;
    height: 30%;
    margin-bottom: 20px;
    background-image: url('../images//dataScreen-main-lb.png');
    .head {
      display: flex;
      justify-content: end;
      font-size: 12px;
    }
    .total {
      display: flex;
      padding: 15px 5px 0 5px;
      justify-content: space-between;
      .num {
        font-size: 20px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-image: url('../images/total.png');
      }
    }
    .liquidfill {
      width: auto;
      height: 120px;
    }
    .sex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 100%;
      padding: 30px 20px 0 20px;
      height: 150px;
      font-size: 12px;
      .sex-item {
        display: flex;
        flex-direction: column;
        .sex-item-top {
          background-image: url('../images//man-bg.png');
          width: 50px;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
        .sex-right-top {
          background-image: url('../images/woman-bg.png');
        }
        .sex-item-buttom {
          width: 100%;
          height: 40px;
          background-image: url('../images//man.png');
        }
        .sex-right-buttom {
          background-image: url('../images/woman.png');
        }
      }
      .sex-text {
        width: 180px;
        margin-top: 5px;
        display: flex;
        justify-content: space-around;
      }
      .sex-buttom {
        width: 100%;
      }
    }
    .agecanvas {
      width: 100%;
      height: 150px;
      margin-top: 20px;
    }
  }
}
</style>
